<style lang="scss" scope>
@import './orderSetting.css';
</style>

<template>
  <div class="orderSetting-wrapper">

    <!-- <Banner>
      <template v-slot:header>
        <div class="banner-title">
          <i />
          订单设置
        </div>
        <div class="banner-refresh">
          <div class="img">
            <img src="../../../icons/icon/刷新.png">
          </div>
          刷新
        </div>
      </template>
    </Banner> -->

    <banner title="订单设置">
      <el-button class="btn-gradient" type="primary" icon="el-icon-refresh" @click="reload">刷新</el-button>
    </banner>

    <Panel>
      <el-form ref="numberValidateForm" :model="numberValidateForm" label-width="100px" class="order-set-form">
        <el-form-item
          label="正常订单超过："
          prop="value"
          label-width="180px"
        >
          <div class="order-time">
            <el-input v-model.number="numberValidateForm.value" placeholder="请输入内容" size="500px">
              <template slot="append">时</template>
            </el-input>
            <div class="order-tips">未支付，订单自动关闭</div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="submit-btn" @click="putOverTime('numberValidateForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </Panel>
  </div>
</template>

<script>

import Panel from '@/components/Panel/Panel'
import { getOverTime, putOverTime } from '@/api/order'
export default {
  components: {
    Panel
  },
  inject: ['reload'],
  data() {
    return {
      numberValidateForm: {
        value: 72
      }
    }
  },
  created() {
    this.getOverTime()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取默认过期时间
    getOverTime() {
      getOverTime().then(res => {
        console.log(res)
        if (res.code == 200) {
          this.numberValidateForm.value = res.data
        }
      })
    },
    // 修改过期时间
    putOverTime() {
      const { value } = this.numberValidateForm
      putOverTime({ value }).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }
      })
    }
  }
}
</script>
